Ref. Site : https://www.devmedia.com.br/como-usar-a-propriedade-position-css/24451

Como o browser renderiza os objetos a serem exibidos

Tenha em mente que o browser pode renderizar uma simples letra A ou uma tag e tudo, tudo pra ele são caixas como se fossem quadrados como no desenho abaixo :

Por default o browser utiliza como position padrão o Static que funciona muito bem na maioria dos casos mas algumas vezes precisamos fazer algo mais elaborado.

A propriedade position pode assumir 4 valores diferentes: Static, Relative, Absolute e Fixed.
Segue abaixo a explicação para de cada uma:

CSS Position Static:

Esse é o valor default de todo elemento HTML, ou seja, ele vai seguir o fluxo comum da sua página como a maneira que a lemos, de cima para baixo e da direita para esquerda.

Ex: h1 { position: static }

Neste tipo de posicionamento ele segue o padrão de elemento inline (em linha) ou elemento em bloco (block). O Inline (em linha) é exibido um seguido do outro na mesma linha e o em bloco (block) ocupa exclusivamente uma linha inteira.

Dizemos que no position:static a âncora do elemento esta no seu elemento antecessor.

CSS Position Relative:

Como o próprio nome diz, relativo a posição que o browser normalmente exibiria o elemento.

Sendo assim, este posicionamento permite um deslocamento do elemento de sua posição original que seria atribuida automaticamente pelo browser. É um pequeno deslocamento (top, right, boottom, left que pode ser feito em relação a sua posição original

Utilizando o position Relative o elemento aceita as propriedades Top, Bottom, Left e Right para definir o quanto da posição original o elemento será deslocado.

No Position Relative a âncora é a posição onde o elemento atual seria renderizado, portanto os deslocamentos feitos pelos parâmetros Top, Bottom, Left e Right são feitos relativos a posição que o elemento ocuparia sem o position relative.

Com elas você pode alterar o posicionamento do elemento. Ex:

Como foi definido :
<header>
   <style>
      * {
            margin: 0;
            padding: 0;
      }
/*Reset*/
   body {
      background: #fffff;
   }
   div {
      background: #eee;
      margin: 200px 200px;
      width: 300px;
      height: 300px;
   }
   h1 {
      position: relative;<position: relative>
      top: 40px;
      left: 60px;
      background-color:cyan;
   }
   h2 {
      top: 70px;
      left: 80px;
      background-color:purple;
   }
   </style>
</header>
<p>
            TextoAntesH1<h1 style="border:1px solid red" class="h1">Sou um h1</h1>TextoDepoisH1
            TextoAntesH2<h2 style="border:1px solid red" class="h2">Sou um h2</h2>TextoDepoisH2
</p>


Como o browser exibe :

Resultado: Notem que o h1 se posicionou de acordo com o left e top (devido ao position:relative) enquanto o h2 manteve o posicionamento comum e ignorou os valores do left e top.

Isso se deve porque elementos com position static (default) não podem ser posicionados.

Dizemos que no position:static a âncora do elemento esta no seu elemento antecessor.

---

CSS Position Absolute:

Com o position absolute a âncora do elemento não fica no seu antecessor mas sim no elemento pai do antecessor.

O elemento pai de maior nível hierárquico é o body.

Então, tecnicamente falando, se eu exibir um monte de tags com position absolute elas serão escritas sempre no mesmo lugar porque estão 'mirando' no elemento pai.

Vamos para um exemplo.
Com ele você pode posicionar qualquer elemento de acordo com o elemento pai que tenha um position diferente de static.

<div>
      <h1>
         <span></span>
      </h1<
   <p></p>
</div>

O elemento DIV é pai dos elementos H1, P e 'avô' do SPAN.
Os elementos H1, P são filhos do elemento DIV e SPAN é o neto do Div.
Os elementos H1 e P são irmãos por estarem no mesmo nível.
E o elemento SPAN é filho do elemento H1 e também 'neto' do elemento DIV.

Eu disse acima 'avô' ou ''neto' mas na realidade só existe pai e filho numa hierarquia muito bem definida. Fica mais didático. Portanto no elemento span você teria que procurar o pai e achando o pai teria que procurar o pai para achar o avô.

Uma particularidade do position:absolute é que os elementos são exibidos 'em outro contexto', ou seja, no position static e relative seguem um 'fluxo comum' mas o absolute segue outro, digamos, um segundo fluxo ou um 'fluxo alternativo' e o espaço ocupado pelos elementos do position absolute não é contabilizado pelo fluxo normal e vice-versa.

Portanto é preciso ter cuidado ao utilizar o positon absolute pois ele deixa de fazer parte do fluxo comum do documento e o espaço destinado a ele deixa de 'contar' no documento.

É muito fácil 'encavalar' tags no documento especialmente em sites responsivos.

Definição :
Css
   * {
      margin: 0; padding: 0;
   } /*Reset*/
   p{ background: #000; }
      div {
      background: #eee;
      margin: 50px;
      width: 300px;
      height: 300px;
      position: relative;
      }
   h1 {
      position: absolute;
      top: 20px;
      left: 20px;
      outline: 1px solid #444;
   }
   h2 { outline: 1px solid #f90; }


<p>
   <div>
      <h1>Sou um h1</h1>
      <h2>Sou um h2</h2>
   </div>
</p>


Como o browser exibe:
   

Notem que o elemento H2 assumiu o topo da DIV, respeitando o fluxo normal do documento, enquanto o h1
passou a se posicionar com uma distância de 20px do topo e 20px da esquerda, porém fora do fluxo,
ficando por cima dos demais elementos.
Um detalhe importante é que você pode usar medidas negativas e posicionar os elementos em locais que antes
seriam impossíveis de serem alcançados.
<body>
          <div>
              <h1>Sou um h1</h1>
          </div>
</body>

Na Css colocariamos:
* {
            margin: 0;
            padding: 0;
        } /*Reset*/
        
        body {
            background: #000;
        }
        
        div {
            background: #eee;
            margin: 50px;
            width: 300px;
            height: 300px;
            position: relative;
        }

        h1 {
            position: absolute;
            top: -20px;
            left: -20px;
            outline: 1px solid #444;
            background: #fff;
        }
Resultado:

---

CSS Position Fixed:

O position fixed se comporta de maneira semelhante ao absolute, deixando de fazer parte do fluxo comum da página.
Porém a grande diferença dele é que ele passa a se referenciar ao window do seu navegador, ou seja, a área que aparece para o usuário independente de barra de rolagem.
<body>
            <div>
                   <h1>Sou um h1</h1>
                   <h2>Sou um h2</h2>
            </div>
</body>
Na Css colocaríamos :
* {
            margin: 0;
            padding: 0;
        } /*Reset*/
        
        body {
            background: #000;
        }
        
        div {
            background: #f90;
            width: 300px;
            height: 1500px;
            position: relative;
        }

        h1 {
            position: fixed;
            top: 0;
            left: 20px;
            right: 20px;
            outline: 1px solid #444;
            background: #fff;
        }

        h2 {
            position: fixed;
            bottom: 0;
            left: 20px;
            right: 20px;
            outline: 1px solid #444;
            background: #fff;
        }
Resultado:


Notem como o elemento H2 se posicionou na parte inferior da página devido ao bottom:
0 e o H1 se pocionou no topo com o top:0.
Reparem também que a página tem barra de rolagem vertical devido ao height da DIV mas mesmo assim o H2 respeitou o window.
As redes sociais e blog tem usado bastante esse recurso.
O próprio Facebook mantém a barra superior fixa independente da navegação do usuário e os alertas do Twitter sempre aparecem no topo da página.
Isso pode ser alcançado facilmente com a propriedade position utilizando o fixed.
Finalizando, tenham cuidado ao utiliza-la.
Sempre optem pelo float para diagramação e position para pequenos ajustes.

---

Outro exemplo

suponha que você queira uma página com um menu lateral esquerdo ocupando algo perto de 20% da página e o corpo da página ocupando 80% do restante da página. Uma dica que dou é que ela usa os conceitos desta aula...position.
A ideia é ser a mais simples possível e que ocupe toda a tela sem deixar espaços.
Outro detalhe fundamental é caso a janela do browser seja redimensionado os elementos devem manter sua disposição original.

Consegue fazer ?

Caso tenha feito a sua compare com a minha. Menu lateral esquerdo

Compare seu código com o meu.